import angular from 'rollup-plugin-angular';
import resolve from 'rollup-plugin-node-resolve';
import typescript from 'rollup-plugin-typescript2';
import commonjs from 'rollup-plugin-commonjs';
import { minify as minifyHtml } from 'html-minifier';
import postcss from 'postcss'
import autoprefixer from 'autoprefixer'
import CleanCSS from 'clean-css';
import sass from 'node-sass';

const cssmin = new CleanCSS();
const htmlminOpts = {
  caseSensitive: true,
  collapseWhitespace: true,
  removeComments: true,
};
// css浏览器兼容支持的配置，参考文档https://github.com/browserslist/browserslist
const browsers = [
  '> 0.5%',
  'last 2 versions',
  'Firefox ESR',
  'not dead',
  'IE 9-11'
];
export default [{
  input: 'src/main.ts', // 导出angular module的文件地址
  output: {
    file: '../../coeus-plugins-core/src/assets/plugins/plugin-a.bundle.js',   // 打包输出的文件地址
    format: 'umd',
    name: 'plugin-a',
  },
  plugins: [
    angular({
      preprocessors: {
        template: template => minifyHtml(template, htmlminOpts),
        style: styles => { // 如果使用的是less 参考底部的说明
          const css = sass.renderSync({ data: styles }).css;
          const result = postcss(
            [
              autoprefixer({
                browsers,
                grid: true
              })
            ]
          ).process(css).css;
          return cssmin.minify(result).styles;
        },
      }
    }),
    resolve({
      jsnext: true,
      main: true,
      // pass custom options to the resolve plugin
      customResolveOptions: {
        moduleDirectory: 'node_modules'
      }
    }),
    typescript({
      typescript: require('typescript')
    }),
    commonjs()
  ],
  external: [ // 需要排除的依赖包
    '@angular/core',
    '@angular/common',
    '@angular/forms',
    '@angular/router'
  ]
}]

/**
 * 如果使用的是less，需要在package.json中添加'gulp','gulp-less','less-plugin-autoprefix'并安装
 * 本项目使用的版本gulp@4.0.0，gulp-less@4.0.1,less-plugin-autoprefix@2.0.0
 * 然后运行命令npm run compile-less编译less文件，angular组件中应该styleUrls应该使用编译出的css文件地址
 * 命令compile-less-watch为监听模式，less 文件修改了之后会自动编译为css
 * rollup.config.js文件中angular的preprocessors配置中的style如下：
 * style: styles => {
 *    return cssmin.minify(styles).styles;
 * }
 */